<template>
  <view class="page flex-col">
    <view class="box_2 flex-col" style="margin-top: 20rpx">
      <view class="text-wrapper_3 flex-row">
        <input class="text_4" placeholder="填写标题" v-model="title" />
      </view>

      <view class="text-wrapper_4 flex-row">
        <textarea maxlength="200" placeholder="填写描述，让更多人看到" v-model="introduce" style="" />
      </view>

      <view class="container">
        <view class="uploadBox flex-row" @click="selectMediaType" style="margin-right: 0rpx; margin-left: 20rpx">
          <view class="flex-col">
            <image class="label_1" src="/static/publish/SketchPngaa1cd8af8fda42687888a9684631ef2025eeedc9a33e04ee00a2132fffb86b41.png" />
            <text class="uploadTxt">上传照片/视频</text>
          </view>
        </view>

        <view v-for="(item, index) in imgList" class="fileBox" :key="index">
          <image mode="aspectFill" :src="item" />
          <uni-icons type="clear" @click="removeImgFile(item, index)" class="delImg" color="#fff" size="30"></uni-icons>
        </view>
        <view v-for="(item, index) in videoList" class="fileBox videoPopu" :key="index">
          <image mode="aspectFill" :src="item.videoImg" />
          <image class="previewPlay" mode="aspectFill" src="../../static/img/play.png" @click="openVideo(item.url)" />
          <uni-icons type="clear" @click="removeVideoFile(item)" class="delImg" color="#fff" size="30"></uni-icons>
        </view>
      </view>
    </view>

    <view class="box_3 flex-col">
      <view class="box_4 flex-col">
        <view class="group_3 align-center justify-between">
          <view class="lineName">分类</view>
          <view class="line">
            <zxz-uni-data-select v-model="category_id" :clear="false" multiple dataKey="label" dataValue="value" :localdata="categoryList" @change="changeCate"></zxz-uni-data-select>
          </view>
        </view>

        <view class="group_3 align-center justify-between">
          <text class="lineName">标签</text>

          <view class="line">
            <zxz-uni-data-select v-model="tags_id" :collapseTagsNum="4" :clear="false" multiple dataKey="label" dataValue="value" :localdata="tagsList" @change="changeTags"></zxz-uni-data-select>
          </view>
        </view>

        <view class="group_5 flex-row align-center justify-between">
          <text class="lineName">地点</text>
          <view class="line">
            <zxz-uni-data-select v-model="area_id" dataKey="label" dataValue="value" :localdata="cityList" @change="changeCity"></zxz-uni-data-select>
          </view>
        </view>

        <image class="image_5" src="/static/publish/SketchPng15b736a455ae9efd8623fc01318054c6802a3d0c6ea3b76d832665ee73eb2014.png" />
      </view>
      <view class="box_5 flex-row justify-between">
        <view class="text-wrapper_6 flex-col" @click="submit(0)">
          <text class="text_13">存草稿</text>
        </view>

        <view class="text-wrapper_7 flex-col" @click="submit(1)">
          <text class="text_14">提交</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      cityIndex: 0,
      article_id: '',
      title: '',
      introduce: '',
      area_id: '',
      tags_id: '',
      category_id: '',

      selectedFilePath: '',
      fileList: [],
      imgList: [],
      videoList: [],
      cityList: [],
      categoryList: [],
      tagsList: [],
      constants: {}
    }
  },
  onLoad(option) {
    this.getData()

    if (option.id) {
      this.article_id = option.id
      this.getArticleDetail()
    }
  },
  onShow() {},
  methods: {
    changeCity: function (e) {
      console.log(this.area_id)
    },
    removeImgFile(url, index) {
      let findex = this.fileList.findIndex(el => el == url)
      this.imgList.splice(index, 1)
      this.fileList.splice(findex, 1)
    },
    removeVideoFile(url, index) {
      let findex = this.fileList.findIndex(el => el == url)
      this.videoList.splice(index, 1)
      this.fileList.splice(findex, 1)
    },
    getData() {
      var that = this
      uni.request({
        url: this.$global.baseUrl + 'getCommonList',
        method: 'GET',
        success: res => {
          that.cityList = res.data.data.city
          that.categoryList = res.data.data.category
          that.tagsList = res.data.data.tags
        }
      })
    },
    getArticleDetail() {
      var that = this
      uni.request({
        url: this.$global.baseUrl + 'getArticleDetail2',
        method: 'GET',
        data: {
          id: that.article_id
        },
        success: res => {
          var res2 = res.data.data
          that.title = res2.title
          that.introduce = res2.introduce
          that.fileList = res2.imagelist
          res2.imagelist.forEach(el => {
            if (!el.endsWith('.mp4')) {
              this.imgList.push(el)
            } else {
              this.$http({
                url: 'upLoadFile',
                data: { file: el }
              }).then(res => {
                let obj = {
                  url: el,
                  videoImg: res.data.screen_shots_pic_url
                }
                this.videoList.push(obj)
              })
            }
          })

          //分类
          that.category_id = res2.categorys
          that.tags_id = res2.tags
          that.area_id = res2.area_id
        }
      })
    },

    submit(type) {
      if (!this.title) {
        return uni.showToast({
          title: '请填写标题',
          icon: 'none'
        })
      }
      if (!this.introduce) {
        return uni.showToast({
          title: '请填写描述',
          icon: 'none'
        })
      }
      if (!this.category_id) {
        return uni.showToast({
          title: '请选择分类',
          icon: 'none'
        })
      }
      if (!this.area_id) {
        return uni.showToast({
          title: '请选择地点',
          icon: 'none'
        })
      }
      if (!this.tags_id) {
        return uni.showToast({
          title: '请选择标签',
          icon: 'none'
        })
      }
      if (this.fileList.length == 0) {
        uni.showToast({
          title: '请上传文件',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      if (this.fileList.length > 6) {
        uni.showToast({
          title: '最多上传6个文件',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      var that = this

      var ul = 'articleSubmit'
      if (that.article_id > 0) {
        var ul = 'articleEdit'
      }
      const address = uni.getStorageSync('wxAdd')
      let latitude = address.latitude
      let longitude = address.longitude
      let categoryId = this.category_id.join(',')
      let tagsId = this.tags_id.join(',')

      this.$http({
        url: ul,
        data: {
          lng: longitude,
          lag: latitude,
          id: that.article_id,
          title: that.title,
          introduce: that.introduce,
          fileList: that.fileList,
          fileList2: that.videoList.map(el => el.videoImg),

          type: type,
          tags_id: tagsId,
          category_id: categoryId,
          area_id: that.area_id
        }
      }).then(res => {
        if (res.code == 1) {
          uni.showModal({
            content: '操作成功',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }
            }
          })
        } else {
          uni.showToast({
            title: '发帖失败~',
            icon: 'none',
            duration: 2000
          })
        }
      })
    },

    changeCate(data) {
      if (data.length >= 5) {
        uni.showToast({
          title: '最多选择4个',
          icon: 'none',
          duration: 2000
        })
        return false
      }
    },

    changeTags(data) {
      if (data.length >= 5) {
        this.tags_id.splice(-1)
        uni.showToast({
          title: '最多选择4个',
          icon: 'none',
          duration: 2000
        })
        return false
      }
    },

    confirm3(data) {
      if (data.length >= 2) {
        uni.showToast({
          title: '最多选择1个',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      this.area_id = data.map(el => el.value).join(',')
    },

    async selectMediaType() {
      var that = this
      const action = await uni.showActionSheet({
        itemList: ['上传图片', '上传视频'],
        success: function (res) {
          console.log('选项索引：' + res.tapIndex)
          if (res.tapIndex === 0) {
            that.selectImage()
          } else if (res.tapIndex === 1) {
            that.selectVideo()
          }
        }
      })
    },
    selectImage() {
      uni.chooseImage({
        success: chooseImageRes => {
          let arr = chooseImageRes.tempFilePaths
          arr.map(el => {
            this.uploadFile(el, 1)
          })
        }
      })
    },
    openVideo(url) {
      uni.navigateTo({
        url: '/pages/test/videoPaly?url=' + url,
        animationType: 'slide-in-bottom',
        animationDuration: 200
      })
    },
    selectVideo() {
      uni.chooseVideo({
        success: chooseVideoRes => {
          this.selectedFilePath = chooseVideoRes.tempFilePath

          this.uploadFile(this.selectedFilePath, 2)
        }
      })
    },
    uploadFile(filePath, type) {
      // 模拟上传操作，实际使用时需要替换为你的上传接口
      uni.showLoading({
        title: '上传中...'
      })

      uni.uploadFile({
        url: 'http://wuhu.njwhd.com/api/common/upload',
        filePath: filePath,
        name: 'file', // 必须提供后台用来接收文件的字段名
        formData: {
          token: 'test'
        },
        success: uploadFileRes => {
          if (uploadFileRes.statusCode == 200) {
            let url = JSON.parse(uploadFileRes.data).data.fullurl
            this.fileList.push(url)
            if (type == 1) {
              uni.showToast({
                title: '上传成功',
                icon: 'success'
              })
              this.imgList.push(url)
            } else {
              this.$http({
                url: 'upLoadFile',
                data: { file: url }
              }).then(res => {
                let obj = {
                  url,
                  videoImg: res.data.screen_shots_pic_url
                }
                this.videoList.push(obj)
                uni.showToast({
                  title: '上传成功',
                  icon: 'success'
                })
              })
            }
          }
        },
        fail: err => {
          uni.hideLoading()
          console.error(err)
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../common/common.css';
.page {
  background-color: rgba(248, 248, 248, 1);
  min-height: 94vh;
  padding-bottom: 50px;
  overflow-y: scroll;
}

.text-area {
  width: 100%;
  margin-top: 5vh;
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 20rpx;
}
.value {
  color: rgba(204, 204, 204, 1);
}
.title {
  text-align: center;
  font-size: 36rpx;
  color: #2088f9;
  margin-top: 20vh;
}

.box_1 {
  background-color: rgba(255, 255, 255, 1);
  padding: 30rpx 12rpx 26rpx 28rpx;
}

.section_1 {
  margin: 0 18rpx 0 14rpx;
}

.text-wrapper_1 {
  width: 108rpx;
  height: 32rpx;
  overflow-wrap: break-word;
  font-size: 0;
  letter-spacing: -0.2800000011920929px;
  font-family: SFProText-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_1 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: SFProText-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}
.videoPopu {
  position: relative;
  .previewPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px !important;
    height: 30px !important;
    display: block;

    transform: translateX(-50%) translateY(-50%);
  }
}

.image_1 {
  width: 48rpx;
  height: 22rpx;
  margin: 4rpx 0 6rpx 10rpx;
}

.text_3 {
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 36rpx;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 54rpx;
}

.box_2 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  align-self: center;
  margin-top: 8rpx;
  width: 710rpx;
  position: relative;
  padding: 30rpx 30rpx 30rpx 30rpx;
}

.text_4 {
  height: 32rpx;
  overflow-wrap: break-word;
  font-size: 32rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 48rpx;
  width: 100%;
}

.text-wrapper_4 {
  margin: 62rpx 298rpx 0 0;
}

.text_5 {
  height: 32rpx;
  overflow-wrap: break-word;
  color: rgba(204, 204, 204, 1);
  font-size: 32rpx;
  font-family: SourceHanSansCN-Normal;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 48rpx;
}

.text-wrapper_5 {
  margin: 32rpx 0 0 586rpx;
}

.text_6 {
  height: 24rpx;
  overflow-wrap: break-word;
  color: rgba(204, 204, 204, 1);
  font-size: 24rpx;
  font-family: SourceHanSansCN-Normal;
  font-weight: NaN;
  text-align: right;
  white-space: nowrap;
  line-height: 36rpx;
}

.group_1 {
  margin: 56rpx 2rpx 0 0;
}

.uploadBox {
  background-color: rgba(250, 250, 250, 1);
  border-radius: 8px;
  border: 1px 3, 3 rgba(221, 221, 221, 1);
  padding: 58rpx 20rpx 38rpx 20rpx;

  width: 200rpx;
  height: 200rpx;
  margin: 0 10rpx; /* 这里添加了左右间隔，如果是space-around就不需要了 */
  text-align: center; /* 水平居中 */
  .uploadTxt {
    font-size: 12px;
    margin-top: 5pxw;
  }
}

.label_1 {
  width: 52rpx;
  height: 48rpx;
  margin: 0 52rpx 0 50rpx;
}

.container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  margin-top: 15px;

  .fileBox {
    position: relative;
    width: 190rpx;
    height: 190rpx;
    margin-left: 20rpx;

    image,
    video {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 10rpx;
    }
    .delImg {
      height: 35rpx;
      width: 35rpx;
      position: absolute;
      top: 0;
      right: 10px;
      z-index: 10;
    }
  }
}

.image_2 {
  position: absolute;
  left: 0;
  top: 92rpx;
  width: 712rpx;
  height: 2rpx;
}

.box_3 {
  padding: 20rpx 20rpx 76rpx 20rpx;
}

.box_4 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  padding: 32rpx 18rpx 0 28rpx;
}

.group_3 {
  margin: 0 12rpx 0 2rpx;
  margin-top: 10px;
}

.lineName {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  line-height: 46rpx;
}

.line {
  font-size: 30rpx;
  width: 550rpx;
}

.thumbnail_3 {
  width: 8rpx;
  height: 20rpx;
  margin: 12rpx 0 4rpx 16rpx;
}

.image_3 {
  width: 662rpx;
  height: 2rpx;
  margin: 34rpx 2rpx 0 0;
}

.group_4 {
  margin: 32rpx 12rpx 0 2rpx;
}

.text_9 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Normal;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 46rpx;
}

.text_10 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(204, 204, 204, 1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Normal;
  font-weight: NaN;
  text-align: right;
  white-space: nowrap;
  line-height: 46rpx;
  margin-left: 416rpx;
}

.thumbnail_4 {
  width: 8rpx;
  height: 20rpx;
  margin: 12rpx 0 4rpx 16rpx;
}

.image_4 {
  width: 662rpx;
  height: 2rpx;
  margin: 34rpx 2rpx 0 0;
}

.group_5 {
  margin: 28rpx 12rpx 0 2rpx;
}

.text_11 {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 42rpx;
}

.text_12 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(204, 204, 204, 1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Normal;
  font-weight: NaN;
  text-align: right;
  white-space: nowrap;
  line-height: 46rpx;
  margin: 6rpx 0 0 416rpx;
}

.thumbnail_5 {
  width: 8rpx;
  height: 20rpx;
  margin: 18rpx 0 10rpx 16rpx;
}

.image_5 {
  width: 662rpx;
  height: 2rpx;
  margin: 26rpx 0 0 2rpx;
}

.box_5 {
  width: 710rpx;
  margin-top: 154rpx;
}

.text-wrapper_6 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 22px;
  border: 1px solid rgba(227, 227, 227, 1);
  padding: 20rpx 28rpx 20rpx 28rpx;
}

.text_13 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 32rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 44rpx;
}

.text-wrapper_7 {
  border-radius: 50rpx;
  background: linear-gradient(331deg, #fe373c 0%, #fe7837 100%);
  /*opacity: 0.3;*/
  background-size: 100% 100%;
  padding: 22rpx 228rpx 22rpx 230rpx;
}

.text_14 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 32rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 44rpx;
}
</style>
